import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TuiDataList } from '@taiga-ui/core';
import {
  TuiDataListWrapper,
  TuiFilterByInputPipe,
  TuiStringifyContentPipe,
} from '@taiga-ui/kit';
import {
  TuiSelectModule,
  TuiTextfieldControllerModule,
} from '@taiga-ui/legacy';

interface Python {
  readonly id: number;
  readonly name: string;
}

const ITEMS: readonly Python[] = [
  { id: 42, name: 'John Cleese' },
  { id: 237, name: 'Eric Idle' },
  { id: 666, name: 'Michael Palin' },
  { id: 123, name: 'Terry Gilliam' },
  { id: 777, name: 'Terry Jones' },
  { id: 999, name: 'Graham Chapman' },
];

@Component({
  selector: 'app-select-demos',
  imports: [
    TuiDataListWrapper,
    ReactiveFormsModule,
    TuiDataList,
    TuiDataListWrapper,
    TuiSelectModule,
    TuiTextfieldControllerModule,
  ],
  templateUrl: './select-demos.component.html',
  styleUrl: './select-demos.component.less',
})
export class SelectDemosComponent {
  protected items = [
    'Luke Skywalker',
    'Leia Organa Solo',
    'Darth Vader',
    'Han Solo',
    'Obi-Wan Kenobi',
    'Yoda',
  ];

  form: FormGroup;

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      test: new FormControl<string | null>(null),
    });
  }

  protected testValue = new FormControl<string | null>(null);
}
